<!--
  功能：菜单树
  作者：menghao.yan
  邮箱：yxs2615@163.com
  时间：2022年09月22日 16:02:35
-->
<template>
  <div>
    <div class="search">
      <a-input-search v-model:value="search.name" placeholder="菜单名称检索" enter-button @search="initTreeData" />
    </div>
    <div class="search">
      <a-space>
        <a-checkbox v-model:checked="checkAll" :indeterminate="indeterminate" @change="onCheckAllChange">全选</a-checkbox>
        <a-button type="primary" @click="update" v-if="roleCode">
          <template #icon>
            <check-outlined />
          </template>
          保存{{roleName}}角色数据
        </a-button>
      </a-space>
    </div>
    <a-tree :tree-data="treeData" v-model:checkedKeys="checkedKeys" :fieldNames="{children:'children', title:'name', key:'code' }" checkable checkStrictly autoExpandParent showLine blockNode
            v-if="treeData.length" defaultExpandAll @check="checkTree" :height="800">
      <template #title="{ name, key, icon}">
        <a-space>
          <component :is="icon" />
          {{ name }}
        </a-space>
      </template>
    </a-tree>
  </div>
</template>

<script>
import { CheckOutlined } from '@ant-design/icons-vue'
import { defineComponent, reactive, toRefs, onMounted, watchEffect } from 'vue'
import {} from 'vue-router'
import {} from 'vuex'
import { tree, all } from '@/api/sysMenuApi'
import { findMenuCodes, update as updateRoleMenu } from '@/api/ct/ctRoleMenuApi'
import { message } from 'ant-design-vue'
export default defineComponent({
  name: '',
  props: {
    row: Object
  },
  emits: [],
  setup(props, context) {
    const search = {
      name: ''
    }
    const data = reactive({
      checkAll: false,
      indeterminate: false,
      treeData: [],
      search,
      checkedKeys: [],
      allMenuCodes: [],
      roleCode: null,
      roleName: null
    }) //里面写所有的响应式数据，像vue2中的data一样

    /**
     * 动态监听
     */
    watchEffect(() => {
      data.roleCode = props.row?.code
      data.roleName = props.row?.name
      if (data.roleCode) {
        initFindMenuCodes()
      }
    })
    /**
     * 获取角色下菜单数据编码
     */
    let initFindMenuCodes = () => {
      findMenuCodes(data.roleCode).then(resd => {
        data.checkedKeys = resd
        let checked = data.checkedKeys
        data.indeterminate = !!checked.length && checked.length < data.allMenuCodes.length
        data.checkAll = checked.length === data.allMenuCodes.length
      })
    }

    // 获取所有的数据编码
    let initAllMenuCodes = () => {
      all(search.name).then(resd => {
        data.allMenuCodes = resd
      })
    }

    // 加载部门树数据
    let initTreeData = () => {
      let params = {
        name: search.name
      }
      tree(params).then(resd => {
        data.treeData = resd
      })
    }

    let checkTree = checkedKeys => {
      let checked = checkedKeys.checked
      data.indeterminate = !!checked.length && checked.length < data.allMenuCodes.length
      data.checkAll = checked.length === data.allMenuCodes.length
    }

    /**
     * 更新所选菜单数组
     */
    let update = () => {
      let params = {
        roleCode: data.roleCode,
        menuCodes: data.checkedKeys?.checked || data.checkedKeys
      }
      updateRoleMenu(params).then(() => {
        message.success('修改成功')
      })
    }

    /**
     * 全选改变
     */
    let onCheckAllChange = e => {
      ;(data.checkedKeys = e.target.checked ? data.allMenuCodes : []), (data.indeterminate = false)
    }
    // 初始化渲染
    onMounted(() => {
      initAllMenuCodes()
      initTreeData()
    })
    return {
      ...toRefs(data),
      checkTree,
      initTreeData,
      update,
      onCheckAllChange
    }
  },
  components: { CheckOutlined }
})
</script>

<style scoped>
.search {
  margin-bottom: 10px;
}
</style>